<template>
  <div class="MTreeContainer">
    <el-tree class="MTree" ref="tree" :data="treeItemList" :props="treeProps" :node-key="nodeKey" :default-expand-all="defaultExpandAll" show-checkbox></el-tree>
  </div>
</template>

<script>
import basicMixins from './basicMixins'

export default {
  name: 'tree',
  mixins: [basicMixins],
  props: ['treeItemList', 'treeLabelAttr', 'treeChildrenAttr', 'nodeKey', 'defaultExpandAll'],
  computed: {
    treeProps() {
      return {
        label: this.treeLabelAttr,
        children: this.treeChildrenAttr
      }
    }
  }
}
</script>

<style scoped>
.MTreeContainer {
  height: 300px;
  overflow: hidden;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  position: relative;
}

.MTree {
  position: absolute;
  left: 0;
  top: 0;
  right: -17px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
